<style lang="less" rel="stylesheet/less">
  .renegade-goods{
    background-color: #fff;
    padding-bottom: 95/75rem;
  }
  .goods-cover {
    width: 10rem;
    height: 10rem;
    background-color: #f0f0f0;
    img{
      width: 100%;
    }
  }

  .goods-back {
    position: absolute;
    top: 30/75rem;
    left: 30/75rem;
    height: 64/75rem;
    width: 64/75rem;
    display: flex;
    z-index: 100;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    .Icon {
      display: inline-block;
      width: 28/75rem;
      height: 28/75rem;
      fill: #fff;
    }
  }
  .renegade-info{
    position: relative;
    padding: 20/75rem;
    line-height: 1.8;
    font-size: 28/75rem;
    .p{
      color: #b2b2b2;
    }
    .p-name{
      font-size: 36/75rem;
    }
    .p-limit{
      position: absolute;
      right: 20/75rem;
      top: 40/75rem;
      color: #f83434;
    }
  }
  .renegade-price {
    margin-top: 36/75rem;
    padding: 0 20/75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .t-new{
      font-size:36/75rem;
      color: #ffb230;
    }
    .t-old{
      font-size: 30/75rem;
      color: #b2b2b2;
      margin-top: 13/75rem;
      span{
        color: #fa5e5e;
        padding-left: 10/75rem;
      }
    }
    .right{
      svg{
        width: 146/75rem;
        height: 146/75rem;
      }
    }
  }
  .renegade-detail{
    padding: 0 20/75rem ;
    .title{
      text-align: center;
      font-size: 36/75rem;
      margin:  36/75rem 0;
    }
    img{
      width: 100%;
    }
  }
  .renegade-footer{
    position: fixed;
    height: 94/75rem;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background-color: #fff;
    .left{
      width: 150/75rem;
      height: 94/75rem;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: space-around;
      .Icon{
        width: 50/75rem;
        height: 50/75rem;
      }
      &:after{
        height: 1px;
        content: '';
        width: 100%;
        border-top: 1px solid #f0f0f0;
        position: absolute;
        top: -1px;
        right: 0;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
      }
    }
    .right{
      flex: 1;
      .btn-buy{
        width: 100%;
        display: block;
        text-align: center;
        height: 94/75rem;
        line-height: 94/75rem;
        background-color: #ffb230;
        font-size: 30/75rem;
        color: #fff;
        &:active{
          background-color:ligten(#ffb230, 10%);
        }
      }
    }
  }
  .countdown{
    height:90/75rem;
    display: flex;
    align-items: stretch;
    .left{
      background-color: #ffb230;
      line-height: 90/75rem;
      width: 223/75rem;
      text-align: center;
      color: #fff;
      font-size: 30/75rem;
    }
    .right{
      background-color: #fa5e5e;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
      padding: 0 30/75rem;
      position: relative;

      &:after{
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 90/75rem solid #af4242;
        border-right: 15/75rem solid transparent;
      }
      .p-time{
        height: 40/75rem;
        width: 40/75rem;
        background-color: #fff;
        color: #000;
        text-align: center;
        line-height: 40/75rem;
        border-radius: 10/75rem;
        font-size: 28/75rem;
      }
      .p-txt{
        color: #fff;
        font-size: 30/75rem;
        margin-right: 10/75rem;
      }
    }
  }
  .btn-bargain{
    display: block;
    width: 100%;
    margin: 20/75rem auto;
    height: 89/75rem;
    text-align: center;
    line-height: 89/75rem;
    background-color:#ffb230;
    color: #fff;
    font-size: 38/75rem;
    border-radius: 15/75rem;
    &:active{
      background-color:ligten(#ffb230, 10%);
    }
  }
</style>

<template>
  <div class="renegade-goods" v-if="renegade.isload">
    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;width: 0;height:0;left: 0;top: 0;">
      <symbol id="kefu" viewBox="0 0 1024 1024">
        <path d="M367.037421 518.004761m-57.762565 0a56.447 56.447 0 1 0 115.52513 0 56.447 56.447 0 1 0-115.52513 0Z" p-id="2338"></path><path d="M657.775084 518.004761m-57.762565 0a56.447 56.447 0 1 0 115.52513 0 56.447 56.447 0 1 0-115.52513 0Z" p-id="2339"></path><path d="M985.823516 507.815701C955.664635 247.830435 754.856144 46.280046 512.405229 46.280046S69.146846 247.830435 38.987966 507.815701c-21.85475 5.221932-38.234813 24.964578-38.234813 48.359404l0 88.972381c0 27.347858 22.375613 49.722448 49.722448 49.722448l0 0c22.523993 0 41.662889-15.184841 47.717791-35.818787l23.14821 6.782473c48.158836 170.624029 205.240431 296.03225 391.063627 296.03225 224.014007 0 406.262794-182.248787 406.262794-406.262794s-182.248787-406.262794-406.262794-406.262794-406.262794 182.248787-406.262794 406.262794c0 25.879414 2.437515 51.201126 7.085372 75.749218l-13.030781-3.817955 0-71.360258c0-20.537755-12.619412-38.268582-30.486338-45.826721 28.774347-244.171092 216.33-433.261705 442.693518-433.261705s413.919171 189.090613 442.693518 433.262728c-17.865903 7.559163-30.485315 25.289989-30.485315 45.826721l0 88.972381c0 27.347858 22.375613 49.722448 49.722448 49.722448l0 0c27.347858 0 49.722448-22.375613 49.722448-49.722448l0-88.972381C1024.059352 532.780279 1007.678266 513.036609 985.823516 507.815701zM136.950092 555.6041c0-31.79924 3.979638-62.685691 11.456936-92.192725 214.038818-4.545526 371.446847-70.368674 470.874347-129.859603 61.675688 55.697533 145.632845 105.509009 252.462942 113.12036 10.475586 34.490535 16.117073 71.064522 16.117073 108.932991 0 207.027124-168.429037 375.456161-375.456161 375.456161-164.849512 0-305.22461-106.792235-355.579461-254.828826l284.85263 83.461877c0.823761 26.625404 22.651906 47.960315 49.476855 47.960315 27.346835 0 49.51574-22.168905 49.51574-49.51574s-22.168905-49.51574-49.51574-49.51574c-16.946974 0-31.899524 8.519024-40.825824 21.502733l-303.535131-88.935542C140.358725 613.689007 136.950092 585.037457 136.950092 555.6041z" p-id="2340"></path>
      </symbol>
      <symbol id="can" viewBox="0 0 1024 1024">
        <g>
          <path d="M-2415.9,404.9c4.2-295.9-240.4-429.3-257-439.1l0,0l0,0l0,0l0,0c-16.7,8.3-261.2,143.1-257,439.1
		c-50,32-101.4,88.9-93.1,187.6c8.3,98.6,104.2,164,141.7,159.8c36.1-4.2,26.4-30.6,26.4-30.6l12.5-51.4c0,0,54.2,82,72.2,82
		c15.3-1.4,90.3,0,98.6,0l0,0l0,0l0,0l0,0c8.3,0,83.4-1.4,98.6,0c18.1,0,72.2-82,72.2-82l12.5,51.4c0,0-11.1,27.8,26.4,30.6
		c36.1,4.2,133.4-61.1,141.7-159.8C-2314.5,493.8-2365.9,436.9-2415.9,404.9L-2415.9,404.9z M-2673,399.3c-6.9,0-97.3-2.8-107-109.8
		c2.8-100,98.6-109.8,107-109.8c6.9,0,102.8,9.7,107,109.8C-2574.3,396.6-2666,399.3-2673,399.3L-2673,399.3z M-2727.2,909.3
		c0,12.5-9.7,22.2-22.2,22.2l0,0c-12.5,0-22.2-9.7-22.2-22.2v-107c0-12.5,9.7-22.2,22.2-22.2l0,0c12.5,0,22.2,9.7,22.2,22.2V909.3
		L-2727.2,909.3z M-2646.6,967.6c0,12.5-9.7,22.2-22.2,22.2l0,0c-12.5,0-22.2-9.7-22.2-22.2V807.8c0-12.5,9.7-22.2,22.2-22.2l0,0
		c12.5,0,22.2,9.7,22.2,22.2V967.6L-2646.6,967.6z M-2572.9,884.3c0,12.5-9.7,22.2-22.2,22.2l0,0c-12.5,0-22.2-9.7-22.2-22.2v-76.4
		c0-12.5,9.7-22.2,22.2-22.2l0,0c12.5,0,22.2,9.7,22.2,22.2V884.3L-2572.9,884.3z"/>
        </g>
        <g>

          <ellipse transform="matrix(0.9992 -4.041422e-02 4.041422e-02 0.9992 -20.9981 21.1156)" class="st0" cx="511.8" cy="529.9" rx="494.3" ry="494.3" fill-rule="evenodd" clip-rule="evenodd" fill="#AF4242"/>
          <circle class="st1" cx="511.8" cy="494.6" r="494.3" fill-rule="evenodd" clip-rule="evenodd" fill="#FA5E5E"/>
          <g>
            <path class="st2" d="M244.6,477.6l111.2-76c0,0,32.4,107.7,97,153.6c75.6,53.7,155.2,71.7,155.2,71.7s-23.5,83.2-98.5,131.4
			c-54.1,34.8-130.4,28.5-130.4,28.5s-6.6-132.7-50.8-203.9C288.7,518.9,244.6,477.6,244.6,477.6z" fill="#FFFFFF"/>
            <path class="st2" d="M252.4,549.2c0.6-0.4,3.7-2.5,8.6-6c12,13.9,26.4,32,41.1,53.4c-12.1,11.3-8.5,19.6-16.6,33
			c-9,14.8-35.2-4.1-50.5-24.7c-14.7-19.7-26-49.2-16.2-53.7C227.7,547.3,241.3,555.9,252.4,549.2z" fill="#FFFFFF"/>
            <path class="st2" d="M787.2,339.5c-14.2-7.9-67.4-30.3-86.8-26.3C687.2,316,536.6,427,439.3,499.6c-12.8-19.9-22.9-40.3-30.2-57.2
			c104-74.1,249.5-178.1,263-188.1c41.3-30.4,51.8-53.2,54.1-52.4c2.3,0.8,76.2,113,81,120.9C812,330.6,801.4,347.4,787.2,339.5z" fill="#FFFFFF"/>
            <path class="st2" d="M804.4,589.1L756.1,678h38.2v19.6h-44.9v27.3h44.9v19.7h-44.9v39.2h-24.5v-39.2h-46.3v-19.7h46.3v-27.3h-46.3
			V678h39L670,589.1h28l33.3,69.3c1.8,3.9,3.9,8.8,6.3,14.7h0.5c1.7-4.8,3.9-9.9,6.5-15.3l33.4-68.6H804.4z" fill="#FFFFFF"/>
          </g>
        </g>
      </symbol>
    </svg>
    <div class="goods-cover">
      <div class="goods-back" @click="goBack">
        <icon symbol="close"></icon>
      </div>
      <slider
        :pagination-visible="true"
        :repeating="true"
        :slides="coverList"
        :auto="5000">
        <div v-for="(item,index) in coverList" :key="index">
          <img :src="'http://www.gogagoga.cc/picfile/'+item"/>
        </div>
      </slider>
    </div>
    <div class="countdown" v-if="dur>0">
      <div class="left">限量500份</div>
      <div class="right">
        <span class="p-time">{{pms.day}}</span>
        <span class="p-txt">天</span>
        <span class="p-time">{{pms.hour}}</span>
        <span class="p-txt">时</span>
        <span class="p-time">{{pms.mini}}</span>
        <span class="p-txt">分</span>
        <span class="p-time">{{pms.sec}}</span>
        <span class="p-txt">秒</span>
      </div>
    </div>
    <div class="renegade-info">
      <div class="p-name">{{renegade.goodsInfo.goName}}</div>
    </div>
    <div class="renegade-price">
      <div class="p-left">
        <div class="t-new">助力价：<small>￥</small>{{renegade.userInfo.pMoney}}元/1份</div>
        <div class="t-old">售价：￥{{renegade.goodsInfo.goPrice}}</div>
      </div>
      <div class="right" @click="jump">
        <svg>
          <use xlink:href="#can"></use>
        </svg>
      </div>
    </div>

    <div class="renegade-detail">
      <div class="title">
        商品详情
      </div>
      <article>
        <div class="img-box" v-for="(item,index) in content">
            <img v-lazy="'http://www.gogagoga.cc'+item" alt="">

        </div>
      </article>
    </div>
      <div class="renegade-footer">
        <div class="left" @click="kefu()">
          <icon symbol="kefu"></icon>
        </div>
        <div class="right">
          <router-link :to="{name:'renegadeBuy'}" class="btn-buy">
            立即购买
          </router-link>
        </div>

      </div>

    </div>
</template>
<script>
  import Icon from '@components/icon.vue'
  import { mapGetters } from 'vuex'
  import Slider from '@components/vue-slider'
  export default {
    components: {
      Slider,
      Icon
    },
    computed: {
      ...mapGetters({
        renegade: 'backend/renegade/getData'
      }),
      coverList() {
        let piclist = this.renegade.goodsInfo.goPicAll
        return piclist!=='' ? piclist.split(','): []
      },
      content() {
        let m;
        let urls = []
        let content = this.renegade.goodsInfo.goContent;
        let regex = /<img\s+src\s*=\s*"(.+?)"/g;
        while (m = regex.exec(content)) {
          urls.push(m[1]);
        }
        return urls
      }
    },
    data () {
      return {
        dur: 0,
        pms: {
          sec: "00",
          mini: "00",
          hour: "00",
          day: "00",
          month: "00",
          year: "0"
        }
      }
    },
    async mounted() {
      document.title = "楠溪峰高山蓝莓砍价通道";
      this.$store.dispatch('global/setLoading', true);
      if(!this.renegade.isLoad) {
        await this.$store.dispatch('backend/renegade/getData', 'LM099')
      }
      this.$store.dispatch('global/setLoading', false);
      this.countdown()
    },
    methods: {
      goBack () {
        this.$router.back();
      },
      kefu () {
        window.location.href= 'tel:4001681520'
      },
      countdown() {
        let _this = this;
        let future = new Date(2017, 5, 7, 12, 0, 0);
        let now = new Date();
        this.dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60;
        if(this.dur > 0){
          this.pms.sec = this.zero(this.dur % 60);
          this.pms.mini = Math.floor((this.dur / 60)) > 0? this.zero(Math.floor((this.dur / 60)) % 60) : "00";
          this.pms.hour = Math.floor((this.dur / 3600)) > 0? this.zero(Math.floor((this.dur / 3600)) % 24) : "00";
          this.pms.day = Math.floor((this.dur / 86400)) > 0? this.zero(Math.floor((this.dur / 86400)) % 30) : "00";
          this.pms.month = Math.floor((this.dur / 2629744)) > 0? this.zero(Math.floor((this.dur / 2629744)) % 12) : "00";
          this.pms.year = Math.floor((this.dur / 31556926)) > 0? Math.floor((this.dur / 31556926)) : "0";
          setTimeout(function () {
            _this.countdown()
          }, 1000)
        }

      },
      zero: function(n){
        var n = parseInt(n, 10);
        if(n > 0){
          if(n <= 9){
            n = "0" + n;
          }
          return String(n);
        }else{
          return "00";
        }
      },
      jump(index) {
        this.$router.push({name:'renegadeShare'})
      }
    }
  }
</script>
